<template>
  <view class="message">
    <nav-bar class="nav-bar">
      <view slot="left"><text class="left">发起聊天</text></view>
      <view slot="center" class="nav-center"><text class="content">消息</text></view>
    </nav-bar>
    <!-- 功能列表 -->
    <view class="function">
      <view class="icon">
        <view class="iconfont icon-fensi"></view>
        <text>粉丝</text>
      </view>
      <view class="icon">
        <view class="iconfont icon-zan"></view>
        <text>赞</text>
      </view>
      <view class="icon">
        <view class="iconfont icon-pinglun2"></view>
        <text>评论和@</text>
      </view>
      <view class="icon">
        <view class="iconfont icon-mendianhudongdierban"></view>
        <text>随拍互动</text>
      </view>
    </view>
    <!-- 广告区域 -->
    <view class="advertising">
      <view class="ad-left">
        <image src="../../static/image/douyin.svg" mode=""></image>
        <text>抖音</text>
      </view>
      <view class="ad-right">下载</view>
    </view>
    <view class="users">
      <image src="../../static/image/douyin.svg" mode=""></image>
      <image src="../../static/image/douyin.svg" mode=""></image>
      <image src="../../static/image/douyin.svg" mode=""></image>
      <image src="../../static/image/douyin.svg" mode=""></image>
      <text>在抖音等你...</text>
    </view>
    <scroll-view scroll-y="true" class="my-scroll">
      <view>
        <message-item v-for="i in 10" :key="i"></message-item>
        <view class="more">
          没有更多消息
        </view>
      </view>
    </scroll-view>
    <tab-bar currentIndex="3"></tab-bar>
  </view>
</template>

<script>
import MessageItem from '../../components/content/message/MessageItem.vue'
export default {
  components: { MessageItem },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.message {
  background: #181725;
  height: 100vh;
  padding: 0 20rpx;
  .function {
    margin-top: 40rpx;
    height: 200rpx;
    display: flex;
    color: #fff;
    .icon {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      text {
        margin-top: 10rpx;
        font-size: 28rpx;
      }
      .iconfont {
        border-radius: 6rpx;
        width: 70rpx;
        height: 70rpx;
        color: #fff;
        text-align: center;
        line-height: 70rpx;
        font-size: 40rpx;
        box-shadow: 0 0 4rpx 1rpx #000;
      }
      .icon-fensi {
        background: blue;
      }
      .icon-zan {
        background: pink;
      }
      .icon-pinglun2 {
        background: purple;
      }
      .icon-mendianhudongdierban {
        background: skyblue;
      }
    }
  }
  .advertising {
    height: 200rpx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ad-left {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 100rpx;
        width: 100rpx;
      }
      text {
        font-size: 48rpx;
        margin-left: 20rpx;
      }
    }
    .ad-right {
      height: 50rpx;
      width: 130rpx;
      background: #ff4156;
      border-radius: 6rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 28rpx;
      box-shadow: 0 0 2rpx 1rpx #000;
    }
  }
  .users {
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #000;
    image {
      height: 50rpx;
      width: 50rpx;
      border-radius: 50%;
      background-color: #000;
      border: 4rpx solid #eee;
      margin-right: -40rpx;
    }
    text {
      margin-left: 60rpx;
      font-size: 32rpx;
      color: #eee;
    }
  }
}
.tab-bar-container {
  background: #000 !important;
}
.left {
  font-size: 24rpx;
  color: #fff;
}
.content {
  color: #eee;
}
.more{
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
}
.my-scroll{
  height: 580rpx;
}
</style>
